<template>
    <div class="gold-shop-wrap">
        <van-nav-bar :title="transfer.title" left-arrow fixed @click-left="onClickLeft" right-text="转账记录" @click-right="onClickRight"/>
        <div class="nav_top">
            <img :src="transfer.avatar_url" alt="">
            <div class="nav_title">
                <div>{{ transfer.name }}</div>
                <div>ID：{{ transfer.uid }}</div>
                <div>{{ transfer.account }}</div>

            </div>
        </div>
        <div class="account">转账金额</div>
        <div class="withdrawal_amt">
      <div>
        <i style="font-size: .34rem;font-weight: bold;font-style: normal;margin-top: .1rem;">￥</i><input type="text" v-model="amount"
          placeholder="请输入金额" /><span @click="allWithdrawal">全部</span>
      </div>
    </div>
        <van-button round block type="info" style="width: 80%;margin: 1rem auto 0.56rem auto"
            color="linear-gradient(to right, #FF5851, #E9011B)" @click="showPopup = true">转账</van-button>
            <van-popup v-model="showPopup" round closeable @click-close-icon="closeClick" position="bottom"
      class="balance-pay-popup-wrap" :style="{ height: showKeyboard ? '450px' : '250px' }">
      <div class="title">确认支付</div>
      <!-- 交易密码 -->
      <div class="row border-none">
        <span class="desc">请输入支付密码:</span>
      </div>
      <div class="row border-none">
        <van-password-input :value="tradePassword" :focused="showKeyboard"
          @focus="handleShowKeyboard"></van-password-input>
        <van-number-keyboard v-model="tradePassword" :show="showKeyboard" :maxlength="maxlength"
          :hide-on-click-outside="false" @input="onPasswordInput" @delete="onPasswordDelete"
          @blur="showKeyboard = false"></van-number-keyboard>
      </div>
    </van-popup>
    </div>

</template>
<script>
import { TRANSFER_APPLY} from '@/api/mine'
export default {
    data() {
        return {
            transfer: {},
            target_id: '',
            amount:'',
            showPopup: false,
      maxlength: 6,
      showKeyboard: false,
      tradePassword: "",
      completePassword: false,
        };
    },
    mounted() {
        this.transfer = JSON.parse(localStorage.getItem('transfer'))
        console.log(this.transfer);

        document.title = this.transfer.title;
        window.scrollTo(0, 0)
    },
    methods: {
        onClickLeft() {
            this.$router.back();
        },
        onClickRight(){
            this.$router.push({name:'transferRecord'})
        },
        allWithdrawal(){
            this.amount = this.transfer.balance
        },
        handleShowKeyboard() {
      this.tradePassword = "";
      this.completePassword = false;
      this.showKeyboard = true;
    },
    onPasswordInput(t) {
      (this.tradePassword = (this.tradePassword + t).slice(0, this.maxlength)),
        this.tradePassword.length !== this.maxlength ||
        this.completePassword ||
        ((this.completePassword = !0), this.onSubmit());
    },
    onPasswordDelete() {
      this.tradePassword &&
        ((this.tradePassword = this.tradePassword.slice(
          0,
          this.tradePassword.length - 1
        )),
          (this.completePassword = this.tradePassword.length === this.maxlength));
    },
    closeClick() {
      this.showPopup = false;
      this.tradePassword = "";
      this.completePassword = "";
    },
    onSubmit() {
      if (this.loading) {
        return;
      }
      this.loading = true;
      let params = {
        type: this.transfer.type,
        amount: this.amount,
        target_id: this.transfer.target_id,
        pay_password: this.tradePassword,
      };
      this.$http
        .post(TRANSFER_APPLY, params)
        .then(() => {
          this.loading = false;
          this.showPopup = false;
          this.$toast.success('转账成功');
          this.amount = "";
          this.pay_password = "";
          this.tradePassword = "";
          this.completePassword = "";
          // setTimeout(() => {
          //   this.$router.push({ name: "withdrawal" });
          // }, 2000);
        })
        .catch(() => {
          this.loading = false;
        });
    },
    },
};
</script>
<style lang="scss" scoped>
.gold-shop-wrap {
    //   min-height: 100vh;
    min-height: calc(100vh - 46px);

    padding-top: 46px;
    // background: #f2f4f5;

    ::v-deep .van-nav-bar .van-icon {
        color: #333333;
    }

    ::v-deep .van-nav-bar__arrow {
        font-size: 20px;
    }
    ::v-deep .van-nav-bar__text {
    color: #333333;
  }
    .nav_top {
        width: 95%;
        margin: 0 auto;
        margin-top: .32rem;
        display: flex;
        align-items: center;

        // justify-content: space-between;
        img {
            width: .88rem;
            height: .88rem;

        }

        .nav_title {
            margin-left: .2rem;
            line-height: .4rem;

            div {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: .24rem;
                color: #999999;
                // text-align: left;
                font-style: normal;
            }

            div:first-child {
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: .28rem;
                color: #333333;
                // line-height: 20px;
                // text-align: left;
                font-style: normal;
            }

        }

    }

    .account {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: .28rem;
        color: #666666;
        // line-height: 20px;
        // text-align: left
        width: 95%;
        margin: 0 auto;
        margin-top: .3rem;
        font-style: normal;
    }
    .withdrawal_amt {
  padding: 0 0.32rem;
  box-sizing: border-box;
  font-size: 0.28rem;
  div {
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.1rem;

    span {
      font-size: 0.28rem;
      // font-weight: bold;
      color: #f32a23;
      padding-top: 0.2rem;
    }

    input {
      width: 80%;
      border: none;
      background: transparent;
      font-size: 0.32rem;
      margin-top: 0.1rem;
    }
  }
}


}
.balance-pay-popup-wrap {
  display: flex;
  -webkit-box-orient: vertical;
  flex-direction: column;
  text-align: center;
  padding: 0.32rem;
  box-sizing: border-box;

  .title {
    color: #1b1b1b;
    font-size: 0.36rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
  }

  .row {
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid #ebedf0;

    &.border-none {
      border: none;
    }
  }

  .van-password-input {
    width: 100%;
    margin: 0;
  }
}
</style>
